{include file="layout/myHeader" /}
<style>
    .modal-backdrop{z-index: auto !important;}
</style>
<div id="app">


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" style="z-index: 999" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" v-if="modifyOrder">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改备注</h4>
                </div>
                <div class="modal-body">
                    ID:<input type="text" v-model="modifyOrder.id" readonly class="form-control">
                    <br>
                    备注：<textarea class="form-control" name="" id="" cols="30" rows="10" v-model="modifyOrder.remark"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="modifyRemark">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <form action="" id="form"  class="row">
        <div class="form-item col-md-6">
            <div class="input-group">
                <span class="input-group-addon">时间段:</span>
                <input class="form-control" v-model="formData.startDay" type="date">
                <span class="input-group-addon">到</span>
                <input class="form-control" v-model="formData.endDay" type="date">
            </div>

        </div>
        <div class="form-item col-md-6">
            <span class="btn btn-primary" @click="queryDo">查询</span>
        </div>
    </form>

    <div class="panel panel-default panel-intro">
        {:build_heading()}

        <div class="panel-body" style="overflow-x: scroll">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="one">
                    <div class="widget-body no-padding">
                        <table id="table" class="table table-striped table-bordered table-hover table-nowrap">
                            <thead>
                                <th>ID</th>
                                <th>订单流水</th>
                                <th>金额（元）</th>
                                <th>交易流水</th>
                                <th>归属门店</th>
<!--                                <th>归属用户</th>-->
                                <th>创建用户</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>数字签名</th>
                                <th>状态</th>
                                <th>备注</th>
                                <th>OP</th>
                            </thead>
                            <tbody>
                                <tr v-if="orders" v-for="order in orders">
                                    <td>{{order.id}}</td>
                                    <td>{{order.order_no}}</td>
                                    <td>{{order.amount}}</td>
                                    <td>{{order.transaction_id}}</td>
                                    <td>{{order.store.name}}</td>
<!--                                    <td>{{order.beyond.nickname}}</td>-->
                                    <td>{{order.creator.nickname}}(UID:{{order.creator.id}})</td>
                                    <td>{{order.create_time_ch}}</td>
                                    <td>{{order.update_time_ch}}</td>
                                    <td>{{order.sign}}</td>
                                    <td>{{order.status_ch}}</td>
                                    <td>{{order.remark}}</td>
                                    <td><span class="btn btn-sm btn-warning"
                                        @click="modifyOne(order)"
                                    >修改备注</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination">
                        <li><a href="#" @click="changePage(-1)">&laquo;</a></li>
                        <li><a href="#" :class="formData.page==n?'fontRed':''" v-for="n in allPage"
                            @click="setPage(n)"
                        >{{n}}</a></li>
                        <li><a href="#" @click="changePage(1)">&raquo;</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

</div>
<style>
    .fontRed{color: red}
</style>
{include file="layout/myFooter" /}
<script>
    $(function(){
        let app= new Vue({
            el:"#app",
            data:{
                modifyOrder:null,
                hideModal:false,
                backUrlPreFix:"/JPZpewDLTY.php",
                orders:[],
                allPage:1,
                formData:{
                    page:1,
                    startDay:"{:date('Y-m-d')}",
                    endDay:"{:date('Y-m-d')}"
                }

            },
            mounted(){
                this.getOrders()
            },
            methods:{
                modifyRemark(){
                    let _this=this
                    $.post(_this.backUrlPreFix+"/direct/order/modifyRemark",{
                        id:_this.modifyOrder.id,
                        remark:_this.modifyOrder.remark
                    },res=>{
                        $("#myModal").modal('hide')
                        if (res.status){
                            _this.getOrders()
                        }
                    })
                },
                modifyOne(order){
                    this.modifyOrder=order
                    $("#myModal").modal('show')
                },
                setPage(n){
                    this.formData.page=n
                    this.getOrders()
                },
                changePage(k){
                    let _this=this,afterPage=0
                    afterPage=_this.formData.page+k
                    if (afterPage===0||afterPage>_this.allPage)return false
                    _this.formData.page=afterPage
                    _this.getOrders()
                },
                queryDo(){
                    this.formData.page=1
                    this.getOrders()
                },
                getOrders(){
                    let _this=this
                    _this.orders=[]
                    $.post(_this.backUrlPreFix+"/direct/order/getDataList",_this.formData,res=>{
                        if (res.status){
                            _this.orders = res.data.dataList
                            _this.allPage = res.data.allPage
                        }
                    })
                }
            }
        })
    })
</script>